<template>

	<view class="nav-body">

		<cu-custom bgColor="bg-gradual-pink" :isBack="false">
			<block slot="backText">返回</block>
			<block slot="content">个人中心</block>
		</cu-custom>


		<!-- 用户相关 -->
		<view class="user page-top" style="background-color:##F1F1F1;background-size: 100% 100%;">
			<!-- 头像 -->
			<view class="cu-avatar xl round margin-left userIcon" :style="'background-image:url('+ userInfo.headPic + ')' ">
				<view class="cu-tag badge" :class="2 % 2 == 0 ? 'cuIcon-female bg-pink' : 'cuIcon-male bg-blue'"></view>
			</view>
			<text style="font-size:1.2em;" class="userName">{{userInfo.nickname}}</text>
			<text style="font-size:0.8em;" class="userId">ID: -</text>
			<text style="font-size:0.8em;" class="userSignature"> {{userInfo.autograph}}</text>
		</view>

		<view class="cu-list menu">
			<view class="cu-item arrow">
				<view class="content">
					<image src="/static/icon/nav/1.png"></image>
					<text class="text-grey" @click="address()">地址管理</text>
				</view>
			</view>
			<!-- <view class="cu-item arrow">
				<view class="content">
					<image src="/static/icon/nav/2.png"></image>
					<text class="text-grey" @click="autograph()">我的收藏</text>
				</view>
			</view> -->
			<!-- <view class="cu-item" :class="menuArrow ? 'arrow' : ''">
					<view class="content">
						<image src="/static/icon/nav/3.png"></image>
						<text class="text-grey" @click="versionRecord()">版本记录</text>
					</view>
				</view> -->

			<view class="cu-item arrow">
				<view class="content">
					<image src="/static/icon/nav/4.png"></image>
					<text class="text-grey" @click="about()">关于</text>
				</view>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-olive lg" v-if="!loginUser" @click="login()">登录</button>
			<button class="cu-btn bg-red margin-tb-sm lg" v-if="!loginUser" @click="register()">注册(没有账号)</button>
			<button class="cu-btn bg-red margin-tb-sm lg" v-if="loginUser" @click="out()">退出登录</button>
		</view>
	</view>
	</scroll-view>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userDefaultInfo: {
					headPic: "background-image:url(http://www.dmoe.cc/random.php);",
					no: "--",
					autograph: "无",
					nickname: "未登录",
				},
				loginUser: false, //当前登录状态
				userInfo: {},

			};
		},
		onLoad() {
			this.userInfo = this.userDefaultInfo;
			//this.init();
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			this.init();
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			/**
			 * 地址管理  
			 */
			address() {
				uni.navigateTo({
					url: "/pages/fpage4/address/index",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			/**
			 * 关于  
			 */
			about() {
				uni.navigateTo({
					url: "/pages/fpage4/about/about",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			// 账号注册
			register() {
				uni.navigateTo({
					url: "/pages/fpage4/user/register",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 登录
			login() {
				uni.navigateTo({
					url: "/pages/fpage4/user/login",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 退出登录
			out() {
				let self = this;
				uni.showModal({
					title: '',
					content: '确认要退出嘛？',
					cancelText: "取消",
					confirmText: "确认",
					confirmColor: '#F2C827',
					cancelColor: '#9E9E9E',
					success: function(res) {
						if (res.confirm) {
							uni.removeStorageSync('XJ-TOKEN');
							self.loginUser = false;
							self.userInfo = self.userDefaultInfo;
							uni.showToast({
								title: "退出成功",
								icon: 'none'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 加载页面逻辑 http://www.dmoe.cc/random.php
			init() {
				// 1、判断当前登录状态
				if (this.isLogin()) {
					this.crud.get(this.path, "/api/client/all/user/findLoginUser").then(res => {
						this.userInfo = res.data.data;
						// 头像处理
						//this.userInfo.head = "background-image:url(" + this.userInfo.head + ")";
						//this.userInfo.head = "background-image:url('/static/icon/nav/1.png')";
						uni.setStorageSync('USER-INFO', JSON.stringify(res.data.data));
					})
					this.loginUser = true;
				} else {
					this.loginUser = false;
				}
			},
			// 判断是否登录
			isLogin() {
				var token = uni.getStorageSync("XJ-TOKEN");
				// 2、获取登录人信息(已登录)
				return token != null && token != '';
			}
		}
	}
</script>

<style>
	/* 顶部菜单 */
	.cu-custom .bg-gradual-pink {
		height: 160upx !important;
		min-height: 160upx !important;
		color: #ffffff !important; // 导航字体颜色
		background-image: linear-gradient(45deg, #ff55ff, #ffaaff) !important; // 主页面导航背景颜色
		z-index: 10000;
	}

	.page {
		height: 100vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: '\e716';
	}

	.switch-sex::before {
		content: '\e7a9';
	}

	.switch-music::after {
		content: '\e66a';
	}

	.switch-music::before {
		content: '\e6db';
	}

	/* 文字展示位置设置 */
	.user {
		height: 20vh;
		width: 100vw;
	}

	.userIcon {
		margin-top: 6vh;
		margin-left: 5vw;
	}

	.userName {
		position: absolute;
		margin-top: 6.5vh;
		margin-left: 2vw;
	}

	.userId {
		position: absolute;
		margin-top: 10vh;
		margin-left: 2vw;
	}

	.userSignature {
		position: absolute;
		margin-top: 14vh;
		margin-left: 2vw;
	}
</style>
